<template>
    <div class="my">
        <div class="mytitle">
            <img src="https://api-haoke-web.itheima.net/img/profile/bg.png" alt="">
            <div class="usertitle">
                <div class="userimg">
                    <img src="https://api-haoke-web.itheima.net/img/profile/avatar.png" alt="">
                </div>
                <div class="userlist" v-if="users === null">
                  <div class="nickname">游客</div>
                  <div class="btn">
                    <van-button type="primary" size="small" @click="goLogin" >去登录</van-button>
                  </div>
                </div>
                <div class="userlist" v-else>
                  <div class="nickname">{{users.nickname}}</div>
                  <div class="but">
                    <van-button type="primary" size="small" @click="GoBackLogin" >退出</van-button>
                  </div>
                  <div class="userdata">编辑个人资料</div>

                </div>
            </div>
        </div>
        <div class="grid">
          <van-grid :column-num="3" :border="false">
            <van-grid-item icon="wap-home-o" text="我的出租" />
            <van-grid-item icon="todo-list-o" text="看房记录" to="/record" />
            <van-grid-item icon="hotel-o" text="成为房主" to="/issueroom" />
            <van-grid-item icon="user-circle-o" text="个人资料" />
            <van-grid-item icon="service-o" text="联系我们" />
          </van-grid>
        </div>
        <div class="imgs">
          <img src="https://api-haoke-web.itheima.net/img/profile/join.png" alt="">
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  data () {
    return {
      users: {}
    }
  },
  created () {
    this.getUserData()
  },
  methods: {
    async getUserData () {
      const { data: res } = await this.$http.get('/user')
      this.users = res.body
    },
    goLogin () {
      this.$router.push('/login')
    },
    GoBackLogin () {
      Dialog.confirm({
        title: '标题',
        message: '是否确定退出?'
      })
        .then(() => {
          // on confirm
          window.sessionStorage.clear()
          this.getUserData()
        })
        .catch(() => {
          // on cancel
        })
    }
  }
}
</script>

<style scoped lang="scss">
.my{
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.mytitle{
    width: 100%;
    min-height: 300px;
    position: relative;
    >img{
      width: 100%;
      border-style: none;
    }
    .usertitle{
      width: 80%;
      height: 55%;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      background: #fff;
      box-shadow: 0 0 10px 3px #ddd;
      margin: 50px auto 0;
      padding: 0 20px;
      text-align: center;
      font-size: 0.13rem;
      .userimg{
        width: 70px;
        height: 70px;
        border: #f2f2f2 solid 5px;
        border-radius: 50%;margin: 0 auto;
        transform: translateY(-50%);
        img{
          width: 100%;
          height: 100%;
        }
      }
      .btn{
        margin-top: 20px;
        >.van-button{
          width: 65px;
          height: 25px;
          border-radius: 5px;
          background: #21b97a;
        }
      }
      .but{
        padding-top: 10px;
        >.van-button{
          width: 50px;
          border-radius: 20px;
        }
      }
      .userdata{
        margin-top: 10px;
      }
    }
}
.grid{
    width: 100%;
    margin-top: 5px;
}
.imgs{
    width: 100%;
    height: 100px;
    margin-top: 10px;
    padding: 20px;
    img{
      width: 100%;
    }
}
</style>
